<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="../js/vue.js" type="text/javascript"></script>
    </head>

    <body>
        <!-- vue容器 -->
        <div id="root">
            <h1>a的值为: {{number.a}}</h1>
            <button v-on:click="number.a++">点我a+1</button>

            <h1>b的值为: {{number.b}}</h1>
            <button v-on:click="number.b++">点我a+1</button>
        </div>

        <script type="text/javascript">
            new Vue({
                el:'#root',
                data:{
                    number:{
                        a:'2',
                        b:'3'
                    }
                },
                watch: {
                //监视多级结构中某个属性a的变化
                'number.a':{
                    handler:function(){
                        console.log("a的值发生了改变");
                    }
                  },

                //监视多级结构中某个属性b的变化
                'number.b':{
                    handler:function(){
                        console.log("b的值发生了改变");
                    }
                  },

                //监视多级结构中所有属性的变化
                number:{
                    deep:true,
                    handler:function(){
                        console.log("number的值发生了改变");
                    }
                   }
                },
            })
        </script>
    </body>
</html>